<template>
    <view>
        <view class="uni-padding-wrap">
			<view class="uni-title">
				性别：{{sexSel}}
			</view>
			<view class="uni-btn">
				<button type="primary" @tap="submit" class="btn">确定</button>
			</view>
		</view>
        <picker-view v-if="visible" :indicator-style="indicatorStyle" @change="bindChange">
            <picker-view-column>
                <view class="item" v-for="(item,index) in sex" :key="index">{{item}}</view>
            </picker-view-column>
        </picker-view>
    </view>
</template>

<script>
    export default {
		name:'sexPicker',
        data () {
            return {
                sex:{
					0:'保密',
					1:'女',
					2:'男'
				},
				sexSel:'',
				/**
				 * 解决动态设置indicator-style不生效的问题
				 */
                visible: true,
                indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`
            }
        },
        methods: {
            bindChange (e) {
                const val = e.detail.value[0]
				switch(val){
					case 0:
						this.sexSel='保密';
						break;
					case 1:
						this.sexSel='女';
						break;
					case 2:
						this.sexSel='男';
						break;
				}
				
            },
			submit(){
				this.$emit('submitSex',this.sexSel)
			}
        }
    }
</script>

<style scoped lang="scss">
    picker-view {
        width: 100%;
        height: 200upx;
        margin-top:20upx;
    }
	.uni-padding-wrap{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.uni-title{width:50%;font-size:$uni-font-size-sm;color:#fa436a;}
	.uni-btn{width:50%;display: flex;flex-direction: row;justify-content: flex-end;}
	.btn{padding:0rpx 10rpx;font-size: 24rpx;line-height: 40rpx;margin:0 30rpx 0 0}
    .item {
        line-height: 100upx;
        text-align: center;
    }
</style>

